﻿@{
    ViewBag.Title = "ActionList";
    Layout = "~/_Layout.cshtml";
}
<style type="text/css">
    #div_chooseaction a {
        text-decoration: underline;
        cursor: pointer;
    }
</style>
<link href="~/Resource/Css/smoothness/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />
<script src="~/Resource/Js/jquery-1.9.1.js"></script>
<script src="~/Resource/Js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="~/Resource/Js/common.js"></script>
<script src="~/Resource/Js/OperCheckbox.js"></script>
<div style="height: auto;">
    <input type="button" id="btn_add_action" class="btn" value="Add Action" style="margin-bottom: 10px; float: left; margin-right: 10px;" />
    <input type="button" id="btn_choose_action" class="btn" value="Choose Action" style="margin-bottom: 10px; float: left" />
    <table id="div_action_result" class="tab">
        <tr>
            <td>Action Id</td>
            <td>Action</td>
        </tr>
    </table>
</div>

<div id="show_actions" style="display: none">
    <img src="~/Resource/Image/Loading.gif" id="londing" style="display: none" />
    <table id="div_chooseaction" class="tab">
    </table>
</div>

<div id="add_action" style="display: none">
    <table class="tab">
        <tr>
            <td>ItemName:</td>
            <td>
                <input type="text" id="txt_itemName" /></td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    $(function () {
        InitDialog("show_actions", 590, 500, RenderActionResult);
        InitDialog("add_action", "auto", 500, AddAction);
    })

    $("#btn_choose_action").click(function () {
        $("#show_actions").dialog("open");
        $("#londing").css("display", "block");
        GetAllActions();
    })

    $("#btn_add_action").click(function () {
        $("#txt_itemName").val("");
        $("#add_action").dialog("open");
    })

    function GetAllActions() {
        var url = '@Url.Action("GetAllAction", "ChooseAction")'

        SendAjax("get", url, { ran: Math.random() }, "json", function (data) {
            data = data.Data;
            RenderData(data);
            $("#londing").css("display", "none");
        });
    }

    function RenderData(data) {
        $("#div_chooseaction tr").each(function () {
            $(this).remove();
        })

        if (data == null || data.length == 0) {
            return;
        }
        var html = "";
        html += "<tr><td><input type='checkbox' id='checkall' />全选</td><td>Action</td></tr>";

        for (var i = 0; i < data.length; i++) {
            html += "<tr>";
            html += "<td><input type='checkbox' tag='checkone' itemId='" + data[i].ItemId + "' itemName='" + data[i].ItemName + "'></td>";
            html += "<td>" + data[i].ItemName + "</td>";
            html += "</tr>";
        }

        $("#div_chooseaction").append($(html));

        var check_arr = new Array();
        $("#div_chooseaction input[type=checkbox][tag=checkone]").each(function () {
            check_arr.push($(this));
        })
        var controlCheckBox = new ControlCheckBox($("#checkall"), check_arr);
        controlCheckBox.CheckAll();
        controlCheckBox.CheckOne();
    }

    function ActionResult() {
        var html = "";
        $("#div_chooseaction input[type=checkbox][tag=checkone]").each(function () {
            if (this.checked) {
                html += "<tr tag='choose'>";
                html += "<td>" + $(this).attr("itemId") + "</td>";
                html += "<td tag='result'>" + $(this).attr("itemName") + "</td>";
                html += "<tr>";
            }
        })
        return html;
    }

    function RenderActionResult() {
        var html = ActionResult();
        $("#div_action_result tr[tag=choose]").each(function () {
            $(this).remove();
        })
        $("#div_action_result").append($(html));

        var _html = "<tr tag='choose'><td style='text-algin:center'><input class='btn' type='button' id='btn_choose' value='选择' /></td><td><span style='color:red'>Random Result</span>:<input type='text' id='txt_action_result' /></td></tr>";
        $("#div_action_result").append($(_html));

        $("#btn_choose").get(0).addEventListener("click", function () {
            $("#txt_action_result").val("");
            GetActionResult();
        });
    }

    function GetActionResult() {
        var ran = new jsRandom();
        var action_Arr = new Array();
        $("#div_action_result tr td[tag=result]").each(function () {
            action_Arr.push($(this).text());
        })
        $("#txt_action_result").val(ran.GetAction(action_Arr));
    }

    function AddAction() {
        var url = '@Url.Action("AddAction", "ChooseAction")'
        var parm = { ran: Math.random(), itemName: $("#txt_itemName").val() };
        SendAjax("get", url, parm, "text", function (data) {
            alert(data);
        });
    }
</script>
